<template>
  <div>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <p>刷新次数: {{ count }}</p>
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-for="item in list">
        <van-row :key="item.id" class="movie-item" >
          <div  @click="test">
          <van-col span="6" class="movie-item-left" >
            <div class="movie-item-imgWrap" >
              <img :src="item.img" :alt="item.name">
            </div>
          </van-col>
          <van-col span="18" class="movie-item-center">
            <div class="movie-item-centerTop" >
              <div class="main-title">{{item.name}}</div>
              <template v-for="i in item.ver" >
                <span class="tag" :key="i">{{i}}</span>
              </template>
            </div>
            <div>{{item.dur}}</div>
            <div>{{item.rt}}{{item.sc}}</div>
            <div>
              {{item.star}}
            </div>
          </van-col>
          </div>
          <!--<van-col span="5">span: 8</van-col>-->
        </van-row>
      </template>
    </van-list>
  </van-pull-refresh>
  </div>
</template>

<script>
  import {List,Card,PullRefresh,Row,Col} from 'vant'
  import { mapGetters, mapActions } from 'vuex'
  import {GetMovieList} from "@/api/api"
  export default {
    name: "movieList",
    components:{
      [List.name]:List,
      [Card.name]:Card,
      [Row.name]:Row,
      [Col.name]:Col,
      [PullRefresh.name]:PullRefresh
    },
    data() {
      return {
        loading: false,
        finished: false,
        count: 0,
        isLoading: false,
        args:{
          cityid: 1
        }
      }
    },
    computed:mapGetters('movies',{
      list:'allMovies',
    }),
    methods: {
      onRefresh() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
          this.count++;
        }, 500);
      },
      test(){
        console.log('111')
      },
      onLoad() {
        setTimeout(() => {
          this.$store.dispatch('movies/getAllMovies',this.args).then((res)=>{
            console.log(res)
            if(res.state === 200){
              this.loading = false
              this.finished = true
            }
          })
        }, 500)
      }
    }
  }
</script>

<style scoped lang="scss">
.movie-item{
  padding:15px 12px 15px 16px;
  .movie-item-imgWrap{
    position: relative;
    overflow: hidden;
    border-radius:5px;
    img{
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    &:after{
      display: block;
      content:'';
      padding-top: 130%;
    }
  }
  .movie-item-center{
    padding-left: 10px;
    .movie-item-centerTop{
      display: flex;
      align-items: center;
      margin:4px 0;
      .main-title{
        margin-right: .5em;
        white-space: nowrap;
        overflow: hidden;
        max-width: 8em;
        text-overflow: ellipsis;
      }
      .tag{
        background: #c2c2d2;
        border: 1px solid #c2c2d2;
        border-radius: 2px;
        padding: 0 3px;
        font-size: 12px;
        font-weight: 400;
        color: #fff;
        height: 14px;
        line-height: 14px;
        &:first-child:not(:last-child) {
          border-radius: 2px 0 0 2px
        }
        &:last-child:not(:first-child) {
          border-radius: 0 2px 2px 0;
          background: #fff;
          color: #c2c2d2
        }
      }
    }
  }
}
</style>
